題目

CSS Challenge Day5

上面的圖是題目，而我們要做出幾乎一樣的樣子，題目中還有附上出題官方的CodePen，也有附上給我們解題用的template，當我們真的不會的時候，還是可以參考他們的寫法，所以沒有想像中困難。

我做好的此題CSS Challeage解答

那麼我們就開始吧。

題目分析

這個題目要求我們製作一個Weekly Report的介面，主要挑戰是底下線條圖的區塊，滑鼠指上線條圖節點的時候，要有動態的呈現該節點的數字。

開始解題

整體架構

<div class="frame">
  <div class="center">
		<div class="card">
			<div class="header">
			</div>
			<div class="body">
			</div>
		</div>
  </div>
</div>

一開始我先使用預設的 template，在 .frame 內先使用第一天教過的小工具來吸取顏色做成底色，也把文字顏色改成白色。
在 .center 裡面放上這次的主角卡片，直接把他取名 .card，並在裡面直接分成上下兩塊，分別取名 .header 跟 .body，並且在 css 欄位裡面設定好他們的底色。

.card {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  width: 280px;
  height: $cardHeight;
  background-color: #FFF;
  border-radius: 3px;
  overflow: hidden;
  box-shadow: 10px 10px 15px 0px rgba(0,0,0,.3);
  
  	.header {
		background-color: #F1BA64;
		height: $headerHeight;
    }
    .body {
		background-color: #FFF;
		height: $bodyHeight;
    }
}   

一開始的畫面會長這樣：

變數說明

$cardHeight: 220px;
$headerHeight: 60px;
$bodyHeight: $cardHeight - $headerHeight;

這邊先解釋一下我設定的變數，因為等等卡片下面白色的 .body 的部分應該會用 absolute 的方式來放置裡面的內容，這樣就不會有內容可以把白色 .body 的區塊撐開，因此我決定一開始就給他一個高度。

這邊就設定整張卡片的高度是 $cardHeight。
其中橘黃色的 .header 高度是 headerHeight ，這樣就能夠輕鬆算出剩下的高度就是 $bodyHeight。

Header 樣式

首先，先把該放在 .header 的文字都放進去。

<div class="header">
	<h1 class="title">weekly report</h1>
	<span class="date">01. Feb - 07. Feb</span>
	<span class="type">Revenue</span>
	<p class="value">$ 3621.79</p>
</div>

這邊我是依據HTML架構來放，所以將Weekly Report這行放在 H1。
小字的部分我全部使用 span 來放，一般文字則是使用 p。

這邊可能是很多人會卡住的地方，因為左右左右，又要使用非 table 的方式排版，可能會困擾很多人，我個人在實務經驗中，這種地方我會使用 grid 來排版，最方便又整齊。
那我們就開始吧。

h1, p, span {
	padding: 0;
	margin: 0;
}
...
.header {
    ...
    display: grid;
    .title {
		text-transform: uppercase;
		font-size: 14px;
		font-weight: 600;
	}
    .date {
		font-size: 11px;
		font-weight: 400;
	}
	.type {
		font-size: 11px;
		text-align: right;
		line-height: 1.8;
		font-weight: 400;
	}
	.value {
		text-align: right;
		font-size: 14px;
		font-weight: 600;
	}
}

一開始，我們先把排版做出來，把文字大小都設定好。
這邊由於我使用了 h1 p span 這些東西，而他們本來就有一些自己的 margin 跟 padding 之類的預設屬性，所以我們先在最上面幫他們做 CSS Reset。

在 .header 身上先加上 display: grid 這行，晚點再來調整理面的屬性。
然後我們把裡面的文字樣式都先調整好。
剛做好的時候長這樣：

.date {
	grid-row-start: 2;
}
.type {
	grid-column-start: 2;
	font-size: 11px;
	text-align: right;
	line-height: 1.8;
	font-weight: 400;
}
.value {
	grid-row-start: 2;
	grid-column-start: 2;
	text-align: right;
	font-size: 14px;
	font-weight: 600;
}

目前裡面的每個東西都已經因為 display: grid 而變成一個 column，現在我們來修改這些 column 的排列方式。

看題目可以知道，weekly report這行 .title 是在左上角，第一個 row 的第一個 column，所以現在已經沒他什麼事了。

我們來看 .date 這行，他應該要在第二排，也就是第二個 row ，所以我們在他身上加上 grid-row-start: 2。

接著看 .type 這行，他應該要在第一排，第二個格子，所以我們幫他加上 grid-column-start: 2，由於預設的 row 就是第一行，所以我這邊就不另外寫。

再來是 .value 這行，他要在第二排的第二個格子，所以應該很簡單了，就幫他加上 grid-row-start: 2 跟 grid-column-start: 2 這兩行。

如此排版完之後會長這樣：

這時候就可以發現我們的 column 之間的間距怪怪的，這時候只要在 .header 的部分加上 box-sizing: border-box 就能讓他正確的吃到裡面的寬高囉。
做好之後長這樣：

Body部分

接著我們就開始來做白色卡片的部分。

<div class="body">
	<div class="params"></div>
    <div class="statistic"></div>
    <div class="days"></div>
</div>

一開始我們先拆分成三個區塊，最上面標示 Views 跟 Purchases 的顏色的區塊，取名叫做 .parsms。
中間底色是線條的主要視覺部分，取名叫 .statistic。
最下面一週的文字部分，取名叫 .days。

1. Params 的部分

<div class="params">
	<span class="red">Views</span>
	<span class="blue">Purchases</span>
</div>

我們先把 .params 內的元素做出來，他們是兩個標示顏色意義的文字，我們就先用兩個 span 來寫出來。

這時候還先不用管 .params 長怎樣，我們先來做裡面 span 的樣子，他們都是右邊是淺色的文字，左邊是一條色塊。我的作法是把東西直接寫在 .parsms > span 內，好讓他們兩個可以吃到一樣的樣式。

.params {
	> span {
		color: #777;
		font-size: 9px;
		display: inline-flex;
		align-items: center;
		font-weight: 400;
	}
}

先設定好文字的樣式，接著我要用一個 :before 的偽類來製作前面的色塊條，並且依據不同 class 給色塊條不同的顏色。
在這邊我使用 display: inline-flex 跟 align-items: center 讓偽類可以跟原本的文字上下置中對齊。

.params {
	> span {
        ...
        &:before {
			display: inline-block;
			border-radius: 3px;
			height: 3px;
			width: 11px;
			content: '';
		}
	}
    			
	.red {
		&:before {
			background-color: $red;
		}
	}
	.blue {
		&:before {
			background-color: $blue;
		}
	}
}

使用偽類最重要的就是 content: '' 這行一定要加上。並且在依據 class 給他不同的底色。剛做好的時候長這樣：

這時候我們就可以來調整 .params 了。

.params {
	display: flex;
	gap: 30px;
	justify-content: flex-end;
	padding: 15px 10px;
			
	> span {
		...
		gap: 9px;
	}
}

首先我們把他加上 display: flex 跟 justify-content: flex-end ，讓他們對齊在卡片的最右側。

接著加上 padding: 15px 10px ，調整 span 跟卡片邊界的上面及右邊的距離。

在 .params 身上加上 gap: 30px ，在視覺上能讓兩個 params 內的項目分開一些。

最後再在 span 身上加上 gap: 9px 讓文字跟偽類有點距離，這樣就完成這個部分了，做好的時候長這樣：

由於篇幅太長了，我決定分兩篇寫，下一篇再來寫後面的表格跟滑鼠指上的部分，敬請期待。

Wrap up and go home

希望改變了這種按照步驟的寫法，能讓更多人看得懂，也能跟我一樣喜歡上寫CSS。

那今天就先到這裡，明天我們再繼續來玩下集。